<template>
	<div id="validation">
		<!---------修改手机号码------------>
		<div v-if="type == 1" class="validation_phone">
			<p class="Title">修改手机号码</p>
			<ul class="validation_steps">
				<li :class="step == 1?'step_active':''"><span>1</span><p>验证手机</p></li>
				<li :class="step == 2?'step_active':''"><span>2</span><p>填写新号码</p></li>
				<li :class="step == 3?'step_active':''"><span>3</span><p>完成</p></li>
			</ul>
			<div v-show="step == 1" class="alidation_1">
				<div class="alidation_item">
					<p class="key">当前手机号码：</p>
					<p>{{phone}}</p>
				</div>
				<div class="alidation_item">
					<p class="key">手机验证码：</p>
					<input type="text" placeholder="请输入验证码" v-model="code1"/>
					<input type="button" name="" v-if="wait==60" @click="countDown" v-model="tips"/>
					<input type="button" name="" v-else v-model="tips"/>
				</div>
				<input class="alidation_btn" type="button" value="下一步" @click="revisePhone1"/>
			</div>
			<div v-show="step == 2" class="alidation_2">
				<div class="alidation_item">
					<p class="key">新手机号码：</p>
					<input class="new" type="text" placeholder="请输入新手机号码" v-model="newphone" />
				</div>
				<div class="alidation_item">
					<p class="key">手机验证码：</p>
					<input type="text" placeholder="请输入验证码" v-model="code2"/>
					<input type="button" name="" v-if="wait==60" @click="countDown" v-model="tips"/>
					<input type="button" name="" v-else v-model="tips"/>
				</div>
				<input class="alidation_btn" type="button" value="下一步" @click="revisePhone2"/>
			</div>
			<div v-show="step == 3" class="alidation_3">
				<img src="../../static/img/certification-07.png"/>
				<p>您已成功绑定新手机号码：{{newphone}}</p>
				<input class="alidation_btn" type="button" value="确认" />
			</div>
		</div>
		<div v-else-if="type == 2" class="validation_email">
			<p class="Title">邮箱认证</p>
			<ul class="validation_steps">
				<li :class="step == 1?'step_active':''"><span>1</span><p>验证邮箱</p></li>
				<li :class="step == 2?'step_active':''"><span>2</span><p>填写新邮箱</p></li>
				<li :class="step == 3?'step_active':''"><span>3</span><p>完成</p></li>
			</ul>
			<div v-show="step == 1" class="alidation_1">
				<div class="alidation_item">
					<p class="key">当前邮箱：</p>
					<p>{{email}}</p>
				</div>
				<div class="alidation_item">
					<p class="key">验证码：</p>
					<input type="text" placeholder="请输入验证码" />
					<input type="button" name="" value="获取验证码" />
				</div>
				<input @click="step = 2" class="alidation_btn" type="button" value="下一步"/>
			</div>
			<div v-show="step == 2" class="alidation_2">
				<div class="alidation_item">
					<p class="key">新邮箱：</p>
					<input class="new" type="text" placeholder="请输入新手机号码" v-model="newphone" />
				</div>
				<div class="alidation_item">
					<p class="key">验证码：</p>
					<input type="text" placeholder="请输入验证码" />
					<input type="button" name="" value="获取验证码" />
				</div>
				<input @click="step = 3" class="alidation_btn" type="button" value="下一步" />
			</div>
			<div v-show="step == 3" class="alidation_3">
				<img src="../../static/img/certification-07.png"/>
				<p>您已成功绑定新邮箱：{{newemail}}</p>
				<input class="alidation_btn" type="button" value="确认" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'validation',
	data: function(){
		return{
			tips:"获取验证码",
			wait:60,//验证码等待时间
			type: 1,//认证类型，手机或邮箱
			step: 1,//修改手机号步骤
			phone: '13169884787',//当前手机号码
			newphone: '',//新手机号码
			email: '1464574248@qq.com',//当前邮箱
			newemail: '',//新邮箱
			keyCode1:'',//验证手机号第一个步骤的密钥
			keyCode2:'',//验证手机号第二个步骤的密钥
			code1:'',
			code2:'',
		}
	},
	methods:{
		revisePhone1:function(){
			var _this = this;
			var postData = _this.$qs.stringify({
				code:_this.code1,
				keyCode:_this.keyCode1,
	        })
			_this.$axios.post('/agent/autho/revisePhone1',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.step = 2;
					_this.wait = 0;
				}else{
					_this.$alert('2',data.result);
				}
			}).catch(function (error) {
			    console.log(error);
			});
		},
		revisePhone2:function(){
			var _this = this;
			var postData = _this.$qs.stringify({
				oldCode:_this.code1,
				oldKeyCode:_this.keyCode1,
				code:_this.code2,
				keyCode:_this.keyCode2,
				phone:_this.newphone,
	        })
			_this.$axios.post('/agent/autho/revisePhone2',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.step = 3;
				}else{
					_this.$alert('2',data.result);
				}
			}).catch(function (error) {
			    console.log(error);
			});
		},
		countDown:function(){
			var _this = this;
			if(_this.wait==60){
				if(_this.step==1){
					_this.getCode(_this.phone);
				}else if(_this.step==2){
					_this.getCode(_this.newphone);
				}
			}
			if(_this.wait==0){
				_this.tips = "获取验证码"
				_this.wait = 60;
			}else{
				_this.wait--;
				_this.tips = _this.wait+"秒后重新获取验证码";
				setTimeout(function() {
					_this.countDown();
				}, 1000);
			}
		},
		getCode:function(phone){
			var _this = this;
			let postData = _this.$qs.stringify({
				phone:phone
	        })
			_this.$axios.post('/sms/public/phoneCode',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.$alert('1','验证码发送成功');
					if(_this.step==1){
						_this.keyCode1 = data.result;
					}else if(_this.step==2){
						_this.keyCode2 = data.result;
					}
				}else{
					_this.$alert('2',data.result);
				}
			}).catch(function (error) {
			    console.log(error);
			});
		},
	},
	created:function(){
		this.type = this.$route.query.type;
		this.phone = this.$route.query.phone;
	}
}
</script>

<style scoped>
#validation{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
/*------步骤标题---------*/
.validation_steps{
	width: 94%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #E6E6E6;
	margin-top: 30px;
	margin-bottom: 30px;
}
.validation_steps li{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 30px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: #808080;
	cursor: pointer;
}
.validation_steps li.step_active{
	border-bottom: 2px solid #FF464E;
	color: #FF464E;
}
.validation_steps li span{
	background-color: #e3e3e3;
	color: #FFFFFF;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin-right: 5px;
	text-align: center;
	line-height: 16px;
	font-size: 12px;
}
.validation_steps li.step_active span{
	background-color: #FF464E;
}
/*-----验证步骤------*/
.alidation_item{
	width: 450px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	color: #545454;
	margin-top: 20px;
}
.alidation_item .key{
	width: 100px;
	text-align: right;
}
.alidation_item input[type='text']{
	height: 30px;
	width: 150px;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
	padding-left: 10px;
}
.alidation_item input[type='text'].new{
	width: 260px;
}
.alidation_item input[type='button']{
	width: 150px;
	height: 30px;
	border: 1px solid #FF464E;
	color: #FF464E;
	box-sizing: border-box;
	background-color: #fff;
	margin-left: 10px;
}
.alidation_btn{
	width: 100px;
	height: 30px;
	border: none;
	background-color: #FF464E;
	color: #FFFFFF;
	display: block;
	margin: 0 auto;
	margin-top: 30px;
}
.alidation_3 img{
	height: 40px;
	display: block;
	margin: 0 auto;
}
.alidation_3 p{
	color: #545454;
	text-align: center;
	margin-top: 15px;
}
</style>